<template>
  <div>
    <el-form ref="form" :model="user" label-width="80px" :rules="rules">
      <el-form-item label="密码" prop="pwd">
        <el-input
          v-model="user.pwd"
          type="password"
          placeholder="请输入密码"
          
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="pwd2">
        <el-input
          v-model="user.pwd2"
          type="password"
          placeholder="请输入确认密码"
        ></el-input>
      </el-form-item>
      <el-form-item align="left">
          <el-button type="primary" @click="queren">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    name:"Form2",
    methods:{
      queren(){
            //发起登入请求前，再次进行表单校验
            // 先获取表单对象，然后执行校验方法
            //validate() element自带的校验方法
            
            this.$refs["form"].validate((valid)=>{
                // valid 校验结果 true 校验通过 false校验不通过
                if(valid){
                    alert("校验通过，可以发起请求")
                }else{
                    alert("校验失败，不可以发起请求")
                }
            })
        }
      
    },
    data(){
      var checkPwd2=(rule,value,callback)=>{
        //trim()删除字符串开始和末尾的空格
        if(value.trim().lenght===0){
          callback(new Error("确认密码不能为空"))
        }else if(value !=this.user.pwd){
          callback(new Error("2次密码不一致"))
        }else{
          callback()
        }
      }
        return {
            user:{
                pwd:"",
                pwd2:""
            },
            rules:{
                pwd:[
                    {required:true,message:"密码不能为空",trigger:"blur"}
                ],
                // 自定义的校验 : validator,写在data下面，return 下面
                //trigger 表示什么事件来出发校验
                //blur 失去焦点事件
                pwd2:[{validator:checkPwd2,trigger:"blur"}]
            }
        }
    }
};
</script>

<style>
</style>